<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行账户</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">银行账户</h1>
                <button onclick="addBankAccount()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-120px)] overflow-y-auto pb-24">
            <!-- Current Bank Accounts -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    绑定账户
                </h3>
                
                <div class="space-y-3">
                    <!-- Primary Account -->
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-university text-red-600 text-lg"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-semibold">中国工商银行</p>
                                        <p class="text-xs text-gray-500">储蓄卡 • 尾号8866</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full mr-2">主账户</span>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                            </div>
                            
                            <div class="border-t border-gray-100 pt-3">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-xs text-gray-600">开户行</span>
                                    <span class="text-xs">工商银行朝阳支行</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-xs text-gray-600">账户状态</span>
                                    <span class="text-xs text-green-600">
                                        <i class="fas fa-check-circle mr-1"></i>正常
                                    </span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">绑定时间</span>
                                    <span class="text-xs">2024-11-15</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-t border-gray-100 px-4 py-3">
                            <div class="flex space-x-2">
                                <button onclick="viewAccountDetail('8866')" class="flex-1 bg-orange-50 text-orange-600 text-xs py-2 rounded-lg border border-orange-200">
                                    <i class="fas fa-eye mr-1"></i>查看详情
                                </button>
                                <button onclick="setAsDefault('8866')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg border border-blue-200">
                                    <i class="fas fa-star mr-1"></i>设为默认
                                </button>
                                <button onclick="unbindAccount('8866')" class="flex-1 bg-red-50 text-red-600 text-xs py-2 rounded-lg border border-red-200">
                                    <i class="fas fa-unlink mr-1"></i>解绑
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Secondary Account -->
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-university text-blue-600 text-lg"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-semibold">中国建设银行</p>
                                        <p class="text-xs text-gray-500">储蓄卡 • 尾号7753</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                            
                            <div class="border-t border-gray-100 pt-3">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-xs text-gray-600">开户行</span>
                                    <span class="text-xs">建设银行中关村支行</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-xs text-gray-600">账户状态</span>
                                    <span class="text-xs text-green-600">
                                        <i class="fas fa-check-circle mr-1"></i>正常
                                    </span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">绑定时间</span>
                                    <span class="text-xs">2024-12-01</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-t border-gray-100 px-4 py-3">
                            <div class="flex space-x-2">
                                <button onclick="viewAccountDetail('7753')" class="flex-1 bg-orange-50 text-orange-600 text-xs py-2 rounded-lg border border-orange-200">
                                    <i class="fas fa-eye mr-1"></i>查看详情
                                </button>
                                <button onclick="setAsDefault('7753')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg border border-blue-200">
                                    <i class="fas fa-star mr-1"></i>设为默认
                                </button>
                                <button onclick="unbindAccount('7753')" class="flex-1 bg-red-50 text-red-600 text-xs py-2 rounded-lg border border-red-200">
                                    <i class="fas fa-unlink mr-1"></i>解绑
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Add New Account -->
            <div class="p-4">
                <button onclick="addBankAccount()" class="w-full bg-white rounded-xl border-2 border-dashed border-gray-300 p-6 text-center hover:border-orange-400 hover:bg-orange-50 transition-all">
                    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-plus text-orange-600 text-lg"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-700 mb-1">添加银行账户</p>
                    <p class="text-xs text-gray-500">支持国内主要银行储蓄卡</p>
                </button>
            </div>

            <!-- Account Management Tips -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    管理说明
                </h3>
                
                <div class="bg-blue-50 rounded-xl border border-blue-200 p-4">
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-blue-600 mr-2 mt-1 text-sm"></i>
                            <div>
                                <p class="text-sm font-medium text-blue-800 mb-1">银行卡要求</p>
                                <p class="text-xs text-blue-700">仅支持本人名下的储蓄卡，不支持信用卡</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <i class="fas fa-shield-alt text-blue-600 mr-2 mt-1 text-sm"></i>
                            <div>
                                <p class="text-sm font-medium text-blue-800 mb-1">安全保障</p>
                                <p class="text-xs text-blue-700">银行信息采用SSL加密保护，确保资金安全</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <i class="fas fa-clock text-blue-600 mr-2 mt-1 text-sm"></i>
                            <div>
                                <p class="text-sm font-medium text-blue-800 mb-1">到账时间</p>
                                <p class="text-xs text-blue-700">提现到绑定银行卡，T+1工作日到账</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transaction History -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    近期银行交易
                </h3>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">提现到账</p>
                                    <p class="text-xs text-gray-500">工行尾号8866</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">¥10,000</p>
                                <p class="text-xs text-gray-400">2025-01-04</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-blue-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">提现到账</p>
                                    <p class="text-xs text-gray-500">建行尾号7753</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-blue-600">¥5,000</p>
                                <p class="text-xs text-gray-400">2024-12-28</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Bank account management functions
        function addBankAccount() {
            window.location.href = 'add-bank-account.html';
        }

        function viewAccountDetail(accountNumber) {
            showToast(`查看尾号${accountNumber}账户详情`);
            // 实际应用中会跳转到详情页面
            setTimeout(() => {
                showToast('功能开发中，敬请期待');
            }, 1000);
        }

        function setAsDefault(accountNumber) {
            if (accountNumber === '8866') {
                showToast('该账户已是默认账户');
                return;
            }
            
            if (confirm(`确认将尾号${accountNumber}的银行卡设为默认提现账户？\n\n设置后，所有提现操作将优先使用此账户。`)) {
                showToast(`尾号${accountNumber}已设为默认账户`);
                
                // 更新UI显示 - 实际应用中会重新加载页面数据
                setTimeout(() => {
                    showToast('账户状态已更新');
                }, 1500);
            }
        }

        function unbindAccount(accountNumber) {
            if (accountNumber === '8866') {
                alert('主账户无法解绑\n\n如需更换主账户，请先添加新账户并设为默认，然后解绑当前主账户。');
                return;
            }
            
            if (confirm(`确认解绑尾号${accountNumber}的银行账户？\n\n解绑后：\n• 无法向该账户提现\n• 可以随时重新绑定\n• 不影响历史交易记录`)) {
                showToast('正在解绑账户...');
                
                setTimeout(() => {
                    showToast('账户解绑成功');
                    // 实际应用中会刷新页面或移除该账户卡片
                }, 2000);
            }
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('银行账户管理');
        });
    </script>
</body>
</html>